<template>
  <div>
    <!-- 面包屑导航区 -->
     <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>商品管理</el-breadcrumb-item>
         <el-breadcrumb-item>商品列表</el-breadcrumb-item>
     </el-breadcrumb>
    <!-- 卡片视图区域 -->
     <el-card>
      <el-row>
          <el-col>
              <el-button type='primary' @click='showAddCateDialog'>添加分类</el-button>
          </el-col>
      </el-row>
    
      <!-- 表格 -->
     <tree-table 
     :data='catelist' 
     :columns='columns' 
     :selection-type='false'
     :expand-type='false'
     :show-index='true'
     index-text='#'
     :border='true'
     :show-row-hover='false'
     class='treeTable'
     >
     <!-- 是否有效 -->
     <template v-slot:isok='scope'>
         <i class="el-icon-success" v-if='scope.row.cat_deleted===false' style='color:lightgreen'></i>
         <i class="el-icon-error" v-else style='red'></i>
     </template>
     <!-- 排序 -->
     <template v-slot:order='scope'>
         <el-tag size='mini' v-if='scope.row.cat_level===0'>一级</el-tag>
         <el-tag size='mini' v-else-if='scope.row.cat_level===1' type='success'>二级</el-tag>
         <el-tag size='mini' v-else type='warning'>三级</el-tag>
     </template>
       
    <!-- 操作 -->
    <template v-slot:opt='scope'>
        <el-button size='mini' type="primary" icon="el-icon-edit" @click='showCateDialog(scope.row.cat_id)'>编辑</el-button>
        <el-button size='mini' type="danger" icon="el-icon-delete" @click='removeCateById(scope.row.cat_id)'>删除</el-button>
    </template>
     </tree-table>

      <!-- 分页 -->
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="querInfo.pagenum"
      :page-sizes="[3, 5, 10, 15]"
      :page-size="querInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      >
    </el-pagination>
     </el-card>

     <!-- 添加分类的对话框 -->
     <el-dialog
       title="添加分类"
       :visible.sync="addCateDialogVisible"
       width="50%"
       @close='addCateDialogClosed'
    >
 <!-- 添加分类的表单 -->
  <el-form 
  :model="addCateForm" 
  :rules="addCateFormRules" 
  ref="addCateFormRef" 
  label-width="100px"
  >
  <el-form-item label="分类名称" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>
  <el-form-item label="父级分类">
      <!-- option用来指定数据源 -->
      <!-- props用来指定配置对象 -->
    <el-cascader
      expand-trigger="hover"
      v-model="selectedKeys"
      :options="parentCateList"
      :props="cascaderProps"
      @change="parentCateChanged"
      clearable>
    </el-cascader>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
     </el-dialog>

     <!-- 修改分类的对话框 -->
     <el-dialog
      title="修改分类"
      :visible.sync="editCateDialogVisible"
      width="50%"
      >
     <el-form 
     :model="editCateForm" 
     :rules="editCateFormRules" 
     ref="editCateFormRef" 
     label-width="100px"
     >
        <el-form-item label="分类" prop="cat_name">
        <el-input v-model="editCateForm.cat_name"></el-input>
     </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer">
     <el-button @click="editCateDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCateInfo">确 定</el-button>
  </span>
     </el-dialog>
  </div>
</template>

<script>
export default {
 name:'Cate',
 data(){
     return{
         //查询条件
         querInfo:{
            type:3,
            pagenum:1,
            pagesize:5
         },
         //商品分类的数据列表，默认为空
         catelist:[],
        //  总数据条数
         total:0,
         //为table指定列的定义
         columns:[
           {
             label:'分类名称',
             prop:'cat_name'
           },
           {
               label:'是否有效',
            //表示，将当前列定义为模板列
               type:"template",
            //表示当前这一列使用模板名称
               template:'isok'
           },
           {
               label:'排序',
            //表示，将当前列定义为模板列
               type:"template",
            //表示当前这一列使用模板名称
               template:'order'
           },
           {
               label:'操作',
            //表示，将当前列定义为模板列
               type:"template",
            //表示当前这一列使用模板名称
               template:'opt'
           },

         ],
         //控制分类对话框的显示与隐藏
         addCateDialogVisible:false,
        //  添加分类的表单数据对象
         addCateForm:{
             //将要添加的分类的名称
             cat_name:'',
             //父级分类的id
             cat_pid:0,
             //分类的等级，默认要添加的是一级分类
             cat_level:0
         },
        //  添加验证表单的规则对象
         addCateFormRules:{
          cat_name:[
            { required: true, message: '请输入分类的名称', trigger: 'blur' },
          ]
         },
         //父级分类的列表
         parentCateList:[],
        //  指定级联选择器的配置对象
         cascaderProps:{
             value:'cat_id',
             label:'cat_name',
             children:'children',
             checkStrictly:'true'
         },
         //选中的父级分类的Id数组
         selectedKeys:[],
         //控制修改对话框的显示与隐藏
         editCateDialogVisible:false,
         //查询到的信息对象
         editCateForm:{},
         //修改的验证规则
         editCateFormRules:{
              cat_name:[{required: true, message: '请输入正确的信息', trigger: 'blur'}]
     }
     }
 },
 created() {
     this.getCateList()
 },
 methods:{
     // 获取商品分类数据
    async getCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: this.querInfo
      })
        if (res.meta.status !== 200) {
          return this.$message.error('获取商品分类失败！')
        }
        console.log(res.data)
        // 把数据列表，赋值给 catelist
        this.catelist = res.data.result
        // 为总数据条数赋值
        this.total = res.data.total
    },
     //监听pagesize改变的事件
     handleSizeChange(newSize){
        this.querInfo.pagesize=newSize
        this.getCateList()
     },
     //监听pageNum的改变
     handleCurrentChange(newPage){
        this.querInfo.pagenum=newPage
        this.getCateList()
     },
     //点击按钮展示添加分类的对话框
     showAddCateDialog(){
      //先获取父级分类的数据列表
      this.getParentCateList()
      this.addCateDialogVisible=true;
     },
     // 获取父级分类的数据列表
    async getParentCateList() {
      const { data: res } = await this.$http.get('categories', {
        params: { type: 2 }
      })

      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类数据失败！')
      }

      console.log(res.data)
      this.parentCateList = res.data
    },
     // 选择项发生变化触发这个函数
    parentCateChanged() {
      console.log(this.selectedKeys)
      // 如果 selectedKeys 数组中的 length 大于0，证明选中的父级分类
      // 反之，就说明没有选中任何父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的Id
        this.addCateForm.cat_pid = this.selectedKeys[
          this.selectedKeys.length - 1
        ]
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = this.selectedKeys.length
        return
      } else {
        // 父级分类的Id
        this.addCateForm.cat_pid = 0
        // 为当前分类的等级赋值
        this.addCateForm.cat_level = 0
      }
    },
     // 点击按钮，添加新的分类
    addCate(){
      this.$refs.addCateFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post(
          'categories',
          this.addCateForm
        )

        if (res.meta.status !== 201) {
          return this.$message.error('添加分类失败！')
        }

        this.$message.success('添加分类成功！')
        this.getCateList()
        this.addCateDialogVisible = false
      })
    },
     // 监听对话框的关闭事件，重置表单数据
    addCateDialogClosed() {
      this.$refs.addCateFormRef.resetFields()
      this.selectedKeys = []
      this.addCateForm.cat_level = 0
      this.addCateForm.cat_pid = 0
    },
    //获取所有商品列表
    async showCateDialog(id) {
      // console.log(id)
      const { data: res } = await this.$http.get("categories/"+id)
      console.log(id);
      if (res.meta.status !== 200) {
        return this.$message.error('查询商品信息失败！')
      }
      this.editCateForm = res.data
      this.editCateDialogVisible = true
    },
     //监听修改事件对话框关闭事件
    editCateDialogClosed(){
         this.$refs.editCateFormRef.resetFields()
    },
    //修改商品信息并提交
    editCateInfo(){
     this.$refs.editCateFormRef.validate(async valid=>{
         if(!valid) return
         //发起用户信息的数据请求
        const {data:res}=await this.$http.put('categories/'+this.editCateForm.cat_id,
        {
          cat_name:this.editCateForm.cat_name,
         }
         )
         console.log(res)
         if(res.meta.status!==200){
          this.$message.error('更新商品信息失败')
         }else{
         //  关闭对话框
         this.editCateDialogVisible=false
         // 刷新数据列表
         this.getCateList()
         // 提示修改成功
         this.$message.success('更新信息成功')
        }
       })
    },
    //删除商品信息
    async removeCateById(id){
      //弹框询问用户是否删除数据
     const confirmResult=await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        //如果用户点击删除的话返回值为字符串confirm
        //如果用户取消了删除则返回值为字符串cancel
        // console.log(confirmResult);
        if(confirmResult!='confirm'){
          return this.$message.info('已取消删除')
        }
       const {data:res}= await this.$http.delete('categories/'+id)
       if(res.meta.status!=200){
         return this.$message.error('删除用户失败!')
       }else[
         this.$message.success('删除用户成功!'),
         this.getCateList()
       ]
    }
  }
}
</script>

<style>
.treeTable{
    margin-top:15px
}
.el-cascader-menu{
    height: 200px;
}
</style>